<template>
	<view>
		<u-form style="padding: 20rpx;" :model="pageForm" ref="pageForm" label-position="top" label-width="200">
			<u-form-item label="标题" prop="name">
				<u-input placeholder="请输入页面标题" v-model="pageForm.name" />
			</u-form-item>
			<u-form-item label="商品" prop="goods" label-position="left">
				<view style="font-size: 9pt;">已选 {{selectList.length}} 个</view>
				<u-button slot="right" size="mini" @click="pickGoodsHandler">选择爆品</u-button>
			</u-form-item>
		</u-form>
		<view style="position: fixed;bottom: 0;width: 100vw;padding:50rpx 0;display: flex;justify-content: space-around;">
			
			<u-button type="primary" size="medium" @click="preview()">预览</u-button>
			<u-button type="primary" size="medium" @click="copyLink()">复制链接</u-button>
			<u-button type="primary" size="medium" @click="confirm()">保存</u-button>
		</view>
		
		
		<u-popup v-model="pickGoodsVisible" mode="bottom" length="100%" :closeable='true' :loading="listLoading">
			<view style="padding-top: 5vh;">
				<scroll-view scroll-y="true" style="height:85vh;background-color: #f2f2f2;">
					<view v-for="(item,index) in goodsList" style="display: flex;align-items: center;padding: 10rpx 20rpx;">
						<view>
							<u-checkbox v-model="item.checked" @change="checkboxChange($event,item)"></u-checkbox>
						</view>
						<view style="display: flex;">
							<view style="width: 100rpx;height: 100rpx;flex:none">
								<image :src="item.cover_pic" mode="aspectFill" style="width: 100%;height: 100%;"></image>
							</view>
							<view style="margin-left: 10rpx;display: flex;flex-direction: column;justify-content: space-around;" >
								<view v-line-clamp="1" style="font-size: 9pt;">{{item.name}}</view>
								<view style="color:red">￥{{item.price}}</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view style="height: 10vh;display: flex;align-items: center;justify-content: space-around;">
					<u-button type="primary" size="medium" @click="selectAll()">全选</u-button>
					<u-button type="success" size="medium" @click="pickGoodsVisible = false">确定</u-button>
				</view>
			</view>
		</u-popup>
		
		
	</view>
	
</template>

<script>
	let that;
	export default{
		data(){
			return {
				mch_id:0,
				pageForm:{
					mch_id:'',
					name:'',
					goods:"",
				},
				pageRules:{
					name: [{required: true,message: '请输入页面标题',trigger: ['change','blur']}],
				},
				pickGoodsVisible:false,
				listLoading:true,
				goodsList:[],
				selectList:[]
			}
		},
		onLoad(){
			let mchMessage = uni.getStorageSync("mchMessage");
			this.pageForm.mch_id = mchMessage.store.mch_id;
		},
		onReady() {
			that = this;
			that.$refs.pageForm.setRules(that.pageRules);
			that.getPageData()
		},
		methods:{
			async getPageData(){
				uni.showLoading({title:'加载中...'});
				let res = await that.$http.request({
					url: that.$api.moreShop.MchPage,
					method: 'GET',
					data:{mch_id:this.pageForm.mch_id}
				});
				uni.hideLoading()
				if(res.code !== 0) {
					return that.$http.toast(res.msg);
				}
				this.pageForm.name = res.data.name;
				this.selectList = res.data.goods ?? [];
			},
			
			
			pickGoodsHandler(){
				that.pickGoodsVisible = true;
				that.getGoodsList();
			},
				
			async getGoodsList(){
				uni.showLoading({title:'加载中...'});
				let res = await that.$http.request({
					url: that.$api.moreShop.gethotgoods,
					method: 'GET',
					data:{limit:99}
				});
				
				if(res.code !== 0){
					uni.hideLoading()
					return that.$http.toast(res.msg);
				}
				that.goodsList = res.data.list;
				that.goodsList.map((item,index)=>{
					let exists = that.selectList.find(itm=>{
						return item.goods_id === itm.goods_id
					})
					if(exists){
						that.goodsList[index].checked = true;
					}else{
						that.goodsList[index].checked = false;
					}
				});
				uni.hideLoading()
			},
			
			checkboxChange(event,row){
				
				if(event.value === true){
					that.selectList.push(row);
				}else{
					let index = that.selectList.findIndex(item =>{
						return item.goods_id == row.goods_id
					})
					if(index !== -1){
						that.selectList.splice(index,1)
					}
				}
				this.$forceUpdate();
			},
			
			selectAll(){
				uni.showLoading({title:'请稍后...'})
				if(that.selectList.length > 0){
					that.goodsList.map((item,index) => {
						that.goodsList[index].checked = false;
					})
					that.selectList = [];
				}else{
					that.goodsList.map((item,index) => {
						that.goodsList[index].checked = true;
						that.selectList.push(item);
					})
				}
				that.$forceUpdate();
				uni.hideLoading()
			},
			
			confirm(){
				that.$refs.pageForm.validate(async valid => {
					if (valid) {
						uni.showLoading({title:'请稍后...'});
						that.pageForm.goods = that.selectList
						let res = await that.$http.request({
							url: that.$api.moreShop.MchPage,
							method: 'post',
							data:that.pageForm
						});
						uni.hideLoading()
						if(res.code !== 0){
							return that.$http.toast(res.msg);
						}
					}
				});
			},
			copyLink(){
				let txt = window.location.href.split("#")[0] + '#/mch/page/index?mch_id='+this.pageForm.mch_id;
				uni.setClipboardData({
					data: txt,
					success: function() {
						_self.$http.toast("复制成功")
					}
				});
			},
			preview(){
				uni.navigateTo({url:'/mch/page/index?mch_id='+this.pageForm.mch_id})
			}
		}
	}
</script>

<style lang="scss">
	
	
	/deep/ ::-webkit-scrollbar {
		//滚动条整体样式
		display: block;
		width: 5px !important;
		height: 5px !important;
		-webkit-appearance: auto!important;
		background: #f2f2f2;
		overflow: auto!important;
	}
	/deep/ ::-webkit-scrollbar-thumb {
		//滚动条里面小方块
		border-radius: 5px !important;
		box-shadow: inset 0 0 3px rgba(0,0,0,0.2) !important;
		background-color: #535353 !important;
	}
	/deep/ ::-webkit-scrollbar-track {
		//滚动条
		border-radius: 5px !important;
		box-shadow: inset 0 0 3px rgba(0,0,0,0.2) !important;
		background-color: #ededed !important;
	}
</style>